<template>
  <div class="Background">
    <img v-if="imgUrl" :src="imgUrl" alt="背景" id="background" @error="imgUrl = null">
    <div class="editBtn" v-if="editModel"
         @click="editVisible = true"
         :style="{border: editModel ? '.1rem solid #fff' : '', background: editModel ? '#00000088' : ''}"><i
      class="el-icon-edit"></i></div>
    <!--    <el-image id="background" :src="imgUrl" alt="背景"></el-image>-->
    <el-dialog title="修改图片源" append-to-body :visible.sync="editVisible">
      <el-radio v-for="(item, index) in imgSource" :key="index" v-model="changeUrl" :label="item.url" border>
        {{ item.name }}
      </el-radio>
<!--      <el-radio v-model="radio" label="bing" border>必应壁纸</el-radio>-->
<!--      <el-radio v-model="changeUrl" label="other" border>其他</el-radio>-->
      <el-input style="margin-top: 1rem" v-model="changeUrl"></el-input>
      <el-button style="margin-top: 1rem" type="primary" @click="save()">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'

const imgSource = [
  {
    name: '东方',
    url: 'https://img.paulzzh.tech/touhou/random'
  }]
export default {
  name: 'background',
  data () {
    return {
      imgSource,
      imgUrl: '',
      radio: '',
      changeUrl: '',
      editVisible: false
    }
  },
  props: ['editModel'],
  mounted () {
    const url = window.localStorage.getItem('imageUrl')
    if (url === undefined || url === null) {
      this.setDefaultSource(imgSource[0].url)
      this.changeBackground(imgSource[0].url)
    } else {
      this.changeBackground(url)
    }
  },
  computed: {
    ...mapState(['focused'])
  },
  methods: {
    changeBackground (url) {
      this.imgUrl = url
      this.changeUrl = url
    },
    setDefaultSource (url) {
      window.localStorage.setItem('imageUrl', url)
    },
    save () {
      this.setDefaultSource(this.changeUrl)
      this.changeBackground(this.changeUrl)
      this.editVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
#background {
  width: 100vw;
  //z-index: 1;
}

.editBtn {
  position: absolute;
  top: calc(50vh - 2rem);
  left: calc(50vw - 2rem);
  z-index: 8;
  background: cornflowerblue;
  font-size: 2rem;
  color: #ffffff;
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
}
</style>
